<template>
  <div class="invite-item">
    <div class="invite-item-left">
      <img src="@/assets/v3/reward.png" alt="" class="invite-item-left-img" />
    </div>
    <div class="invite-item-right">
      <div>
        <div class="invite-item-status">进行中</div>
        <div class="invite-item-title">
          招聘会标题招聘会标题招聘会标题招聘会标题招聘会标题招聘会标
        </div>
      </div>

      <div class="invite-item-info">
        <div class="invite-info-left">
          <div class="invite-info-start-time">
            开始时间：<span>2022年4月1日</span>
          </div>
          <div class="invite-info-end-time">
            结束时间：<span>2022年5月1日</span>
          </div>
        </div>
        <div class="invite-info-btn" @click="toJump">
          进入会场
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {},
      list: []
    };
  },
  methods: {
    toJump(item) {
      const routeLink = this.$router.resolve({
        path: `/invite/jobFairsOne?type=${item.type}`
      });
      window.open(routeLink.href, "_blank");
      // this.$router.push("index/" + type);
    }
  }
};
</script>

<style lang="less" scoped>
.invite-item {
  width: 100%;
  max-width: 1200px;
  opacity: 1;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 196px;
  padding: 20px 0 16px 0;
  .invite-item-left {
    width: 387px;
    height: 100%;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden;
    opacity: 1;
    .invite-item-left-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .invite-item-right {
    flex: 1;
    padding-left: 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .invite-item-status {
      text-align: center;
      width: 80px;
      height: 32px;
      background: #64b6a8;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;

      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      line-height: 32px;
    }
    .invite-item-title {
      margin-top: 4px;
      height: 34px;
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      line-height: 34px;
    }
    .invite-item-info {
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      line-height: 28px;
      display: flex;
      justify-content: space-between;
      .invite-info-left {
        .invite-info-start-time {
          span {
          }
        }
        .invite-info-end-time {
          margin-top: 12px;

          span {
          }
        }
      }
      .invite-info-btn {
        margin-top: 28px;
        text-align: center;
        width: 150px;
        height: 40px;
        background: #64b6a8;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;

        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        line-height: 40px;
        cursor: pointer;
      }
    }
  }
}
</style>
